import React, { Component } from 'react'
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './logres.scss'
import {login} from '../../utils/api'
import {withRouter} from 'react-router-dom' //没有this props是 用这个
class Login extends Component {
    
    constructor(props) {
        super(props)
        this.state = {
            
        }
    }
    
    componentDidMount(){
        //手动把URL改成/login
        this.props.history.replace('/login')
    }
    onLogin(value){
      console.log('onlogin',value)
        login(value).then(res=>{
          console.log('登录成功',res)
          localStorage.setItem('token',res.token)//存储tooken
          this.props.onLogin()
        })
    }
    render() {
      return (
        <div className='login'>
          <Form
           name="normal_login"
           className="login-form"
           initialValues={{remember: true, }}
           onFinish={this.onLogin.bind(this)}
          >
          <Form.Item
            className='forminput'
            name="username"
            rules={[
              {
                required: true,
                message: 'Please input your Username!',
                // pattern: /^[a-zA-Z][a-zA-Z0-9]{3,15}$/
              },
            ]}
            >
            <Input prefix={<UserOutlined className="site-form-item-icon inputword" />} placeholder="Username" />
            </Form.Item>
            {/* eslint-disable */}
            <Form.Item
              className='forminput'
              name="password"
              rules={[
                {
                required: true,
                message: 'Please input your Password!',
                // pattern:/^[a-zA-Z][0-9a-zA-Z\@\!\#\$\^\&\*\-\_]{7,15}$/
                },
              ]}
              >
                {/* eslint-enable */}
            <Input
                prefix={<LockOutlined className="site-form-item-icon inputword" />}
                type="password"
                placeholder="Password"
                />
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>Remember me</Checkbox>
              </Form.Item>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                  登录
              </Button>
            </Form.Item>
            </Form>
        </div>
        )
    }
}
export default withRouter(Login)